<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout">
<head>
<script th:src="@{/js/page.js}"></script>
</head>
<body>
	<!-- /section:basics/content.breadcrumbs -->
	<div class="page-content" layout:fragment="content" seq="12">
		<!-- /section:settings.box -->
		<div class="page-content-area">
			<div class="row">
				<div class="col-xs-12">
					<div class="row">
						<div class="col-xs-12">
					    <form id="searchForm" action="#">
							<div class="table-header">角色列表</div>
							<table width="30%" class="CSSearchTbl" cellpadding="0"
								cellspacing="0">
								<tr>
									    <td class="left">角色名：</td>
										<td class="right"><input type="text" size="16" name="name"/></td>
										<td class="right" colspan="2"><span
											class="btn btn-primary pull-left col-sm-12 tbl-search"
											onclick="startQuery()"> 开始搜索 <i
												class="ace-icon fa fa-search"></i>
										</span></td>
								</tr>
							</table>
                           </form>
							<div class="table-responsive">
								<table id="sample-table-2"
									class="table table-striped table-bordered table-hover">
									<thead>
										<tr>
											<th class="center">序号<!-- <label class="position-relative">
													<input type="checkbox" class="ace" /> <span class="lbl"></span>
											</label> --></th>
											<th>名称</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody id="myData">
									</tbody>
								</table>
							</div>
							<div align="right">
								<ul id="myPage" class="pagination">
								</ul>
							</div>
						</div>
					</div>

					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content-area -->
		<!-- /.page-content-area -->
		<!-- /.page-content -->
	<script id="orderTemplate" type="text/x-handlebars-template">
	{{#each this}}
		<tr id="{{id}}">
		<td class="center">{{id}}</td>
        <td>{{name}}</td>
        <td><div class="hidden-sm hidden-xs btn-group">
				 <button class="btn btn-xs btn-info" style="margin-right:15px;" onclick="editRole({{id}})">
				   <i class="ace-icon fa fa-pencil bigger-120" ></i> 编辑
				</button>    <button class="btn btn-xs btn-danger" >
				<i class="ace-icon fa fa-trash-o bigger-120"></i>删除
				</button>
			 </div>
         </td>
		</tr>
	{{/each}}
	</script>	
<script type="text/javascript">
	function query(params) {
		$curs = params;
		window.location.hash = JSON.stringify($curs);
		$('#myPage').html('');
		$.ajax({
			type : "POST",
			url : '/sys/roleListData',
			data : params,
			dataType : 'json',
			success : function(data) {
				$('#myData').empty();
				var template = Handlebars.compile($("#orderTemplate").html());
				var $tr = template(data.list);
				$('#myData').append($tr);
				pagePlugin('myPage',data.pages,data.pageNum,data.total,jumpPage);
			}
		});
	}
	
	function editRole(roleId){
		window.location.href = "/sys/editRoleAuthView/"+roleId;
	}
</script>
</div>
</body>
</html>